<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,minimum-scale=0.1,maximum-scale=10,initial-scale=1.0,user-scalable=yes"/>

        <!-- 
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="echarts.min.js"></script>
        <script src="jquery-2.1.1.min.js"></script>
        <script src="bootstrap.min.js"></script>
        -->

        <link rel="stylesheet" href="../../../../vendor/bootstrap/css/bootstrap.min.css">
        <script src="../../../../vendor/echarts/echarts.min.js"></script>
        <script src="../../../../vendor/jquery/jquery-2.1.1.min.js"></script>
        <script src="../../../../vendor/bootstrap/js/bootstrap.min.js"></script>

        <title></title>
        <script>
            $(document).ready(function() {
                var procs = TEMPLATE_PROCS;

                var draw_selectors = function() {
                    var c = "";
                    for (var k in procs) {
                        c += '<label><input type="checkbox" class="procs" value="' + procs[k].name + '">' + procs[k].name + '</label><br />';
                    }
                    $("#selectors").html(c);
                }
                $("#ensure").click(function() {
                    var drawprocs = [];
                    $(".procs:checked").each(function() {
                        console.debug($(this).val());
                        drawprocs.push($(this).val());
                    });
                    draw_procs(drawprocs);
                    $("#theModal").modal("hide");
                });

                var draw_summary = function() {
                    var chart = echarts.init(document.getElementById("summary"));
                    chart.setOption({
                        title: {
                            text: "SUMMARY",
                        },
                        tooltip: {
                            trigger: 'axis',
                        },
                        legend: {
                            data: ['used', 'free', 'buffers', 'cached', 'shmem', 'slab'],
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: TEMPLATE_XAXIS
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                            },
                        ],
                        series: TEMPLATE_SERIES,
                    });
                }
                var draw_procs = function(drawprocs) {
                    var chart = echarts.init(document.getElementById("proc"));
                    var option = {
                        title: {text: "PROC"},
                        tooltip: {trigger: 'axis'},
                        legend: {data: []},
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: TEMPLATE_XAXIS
                            }
                        ],
                        yAxis: [{type: 'value'}],
                        series: [],
                    };

                    var is_draw = function(name) {
                        if (name.length == 0) {
                            return true;
                        }
                        for (var k in drawprocs) {
                            if (name == drawprocs[k]) {
                                return true;
                            }
                        }
                        return false;
                    };
                    for (var k in procs) {
                        if (!is_draw(procs[k].name)) {
                            continue;
                        }
                        option.legend.data.push(procs[k].name);
                        option.series.push({
                            name: procs[k].name,
                            type: "line",
                            stack: "total",
                            areaStyle: {normal: []},
                            data: procs[k].ranks,
                        });
                    }
                    chart.setOption(option);
                }
                draw_selectors();
                draw_summary();

                var first_proc = [procs[0].name, procs[1].name];
                draw_procs(first_proc);
            });
        </script>
        <style>
            #summary,#proc {
                width: 100%;
                height: 400px;
            }
            .clear:after {
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        总量
                    </div>
                    <div class="panel-body">
                        <div id="summary" class="col-lg-12"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="clear">
                            <button class="btn btn-default" data-toggle="modal" data-target="#theModal">选择进程</button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="proc" class="col-lg-12"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="theModalLabel">New Task</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group" id="selectors">
                            <label><input type="checkbox">进程1</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="ensure">确认</button>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

